<template>
    <div>
        <van-form>
            <slot name="global-config"></slot>
            <h2 class="form-group-label">
                上传图片
            </h2>
            <van-field name="uploader">
                <template #input>
                    <van-uploader :max-count="1"
                                  :max-size="3 * 1024 * 1024"
                                  :preview-full-image="false"
                                  multiple
                                  v-model="shadowImages"
                                  :before-read="beforeUpload"
                                  :after-read="upload"/>
                </template>
            </van-field>
            <h2 class="form-group-label">
                基本配置
            </h2>
            <van-field label="高度">
                <template #input>
                    <van-radio-group v-model="styleHeight" direction="horizontal">
                        <van-radio style="margin-bottom: 8px" name="auto">自动</van-radio>
                        <van-radio style="margin-bottom: 8px" name="none">输入高度</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-if="data.style.height !== 'auto'" v-model="oldHeight" label="输入高度" type="digit">
            </van-field>
            <van-field label="填充模式">
                <template #input>
                    <van-radio-group v-model="data.fit" direction="horizontal">
                        <van-radio style="margin-bottom: 8px" name="none">无</van-radio>
                        <van-radio style="margin-bottom: 8px" name="contain">Contain</van-radio>
                        <van-radio style="margin-bottom: 8px" name="cover">Cover</van-radio>
                        <van-radio style="margin-bottom: 8px" name="fill">Fill</van-radio>
                        <van-radio style="margin-bottom: 8px" name="scale-down">Scale-Down</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
        </van-form>
    </div>
</template>
<script>
    import * as qiniu from 'qiniu-js'
    import Draggable from 'vuedraggable'

    export default {
        components: {
            Draggable,
        },
        props: {
            data: Object
        },
        computed: {
            dragOptions() {
                return {
                    animation: 200,
                    group: "description",
                    disabled: false,
                    ghostClass: "ghost"
                };
            },
            styleHeight:{
                get(){
                    if(this.data.style.height === 'auto'){
                        return 'auto'
                    }
                    return 'none'
                },
                set(value){
                    if(value === 'auto'){
                        this.data.style.height = 'auto'
                    }else{
                        this.data.style.height = this.oldHeight;
                    }
                }
            },
        },
        data() {
            return {
                drag: false,
                oldHeight : 160,
                shadowImages : []
            }
        },
        watch:{
            oldHeight(){
                this.data.style.height = this.oldHeight;
            },
            shadowImages(){
                this.uploadFinished()
            }
        },
        mounted(){
            if (this.data.url !== '' && this.data.url !== undefined){
                this.shadowImages = [ { url : this.data.url } ]
            }else{
                this.shadowImages = []
            }
        },
        methods: {
            // 返回布尔值
            beforeUpload(file) {
                if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
                    this.$message.error('只支持jpg, png格式图片');
                    return false;
                }
                return true;
            },
            uploadFinished (){
                if (this.shadowImages.length === 0 || this.shadowImages[0] === undefined){
                    this.data.url = '';
                    return
                }
                this.data.url = this.shadowImages[0].url;
            },
            async upload(file) {
                const $this = this;
                file.status = 'uploading';
                file.message = '上传中...';
                const data = await this.$post('/api/upload/image-token', { file: file.file.name })
                file.url = data.dest
                let observable = qiniu.upload(file.file, data.key, data.token)
                let observer = {
                    error(err) {
                        if (err.code === 403) {
                            $this.$message.warning("该文件禁止上传")
                        } else {
                            $this.$message.warning(err.message)
                        }
                    },
                    complete(res) {
                        file.status = 'done';
                        file.message = '上传成功';
                        $this.uploadFinished()
                    }
                };
                observable.subscribe(observer) // 上传开始
            }
        }
    }
</script>